<template>
  <div>
    <!-- 注册内容 -->
    <div class="register">
      <h3>
        注册新用户
        <span class="go"
          >我有账号，去 <router-link to="/login">登陆</router-link>
        </span>
      </h3>
      <el-form :model="registerForm" :rules="rules" ref="registerForm">
        <el-form-item class="input-text clearFix" prop="mobile" label="手机号:">
          <el-input
            type="text"
            v-model="registerForm.mobile"
            placeholder="请输入你的手机号"
          />
        </el-form-item>
        <el-form-item class="input-text clearFix" prop="code" label="验证码:">
          <el-input
            type="text"
            v-model="registerForm.code"
            placeholder="请输入验证码"
          />
          <el-button plain @click="getCode" :disabled="disabled">{{
            codeBtn
          }}</el-button>
        </el-form-item>
        <el-form-item
          class="input-text clearFix"
          prop="password"
          label="登录密码:"
        >
          <el-input
            type="password"
            placeholder="请输入密码"
            v-model="registerForm.password"
          />
        </el-form-item>
        <el-form-item
          class="input-text clearFix"
          prop="surepassword"
          label="确认密码:"
        >
          <el-input
            type="password"
            placeholder="请输入确认密码"
            v-model="registerForm.surepassword"
          />
        </el-form-item>
        <el-form-item class="setting" prop="agreement">
          <el-checkbox-group v-model="registerForm.agreement">
            <el-checkbox
              label="同意协议并注册《尚品汇用户协议》"
              name="registerForm.agreement"
            ></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            class="btn"
            @click="submitForm('registerForm')"
            >完成注册</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <!-- 底部 -->
    <div class="copyright">
      <ul>
        <li>关于我们</li>
        <li>联系我们</li>
        <li>联系客服</li>
        <li>商家入驻</li>
        <li>营销中心</li>
        <li>手机尚品汇</li>
        <li>销售联盟</li>
        <li>尚品汇社区</li>
      </ul>
      <div class="address">地址：北京市昌平区宏福科技园综合楼6层</div>
      <div class="beian">京ICP备19006430号</div>
    </div>
  </div>
</template>
<script>
import { reqGetCode, reqUserRegister } from "@/api";
export default {
  name: "Register",
  data() {
    const mobileReg = /^1[0-9]{10}$/;
    const validateMobile = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入手机号"));
      } else if (!mobileReg.test(this.registerForm.mobile)) {
        callback(new Error("手机格式错误"));
      } else {
        callback();
      }
    };
    const validatePassword = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    const validatePassword2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.registerForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      registerForm: {
        mobile: "",
        code: "",
        password: "",
        surepassword: "",
        agreement: "",
      },
      codeBtn: "获取验证码",
      disabled: false,
      rules: {
        mobile: { required: true, validator: validateMobile, trigger: "blur" },
        code: { required: true, message: "请输入验证码", trigger: "blur" },
        password: {
          required: true,
          validator: validatePassword,
          trigger: "blur",
        },
        surepassword: {
          required: true,
          validator: validatePassword2,
          trigger: "blur",
        },
        agreement: {
          required: true,
          message: "请勾选用户协议",
          trigger: "blur",
        },
      },
    };
  },
  mounted() {},
  methods: {
    getCode() {
      this.$refs["registerForm"].validateField("mobile", (err) => {
        if (err) {
          console.log("获取失败");
          return;
        } else {
          this.codeTime();
          reqGetCode(this.registerForm.mobile)
            .then((res) => {
              if (res.code == 200) {
                this.$store.dispatch("getCode", { code: res.data });
                this.registerForm.code = res.data;
              }
            })
            .catch((err) => {
              console.log(err);
            });
        }
      });
    },
    // 验证码倒计时
    codeTime() {
      let time = 60;
      let timer = setInterval(() => {
        if (time == 0) {
          clearInterval(timer);
          this.codeBtn = "获取验证码";
          this.disabled = false;
        } else {
          this.disabled = true;
          this.codeBtn = time + "秒后重试";
          time--;
        }
      }, 1000);
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const data = {
            phone: this.registerForm.mobile,
            code: this.registerForm.code,
            password: this.registerForm.password,
          };
          reqUserRegister(data)
            .then((res) => {
              if (res.code == 200) {
                this.$message({
                  message: "注册成功",
                  type: "success",
                });
              } else if (res.code == 223) {
                this.$message({
                  message: res.message,
                  type: "warning",
                });
              }
              setTimeout(() => {
                this.$router.push("/login");
              }, 1000);
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.register {
  width: 1200px;
  height: 460px;
  border: 1px solid rgb(223, 223, 223);
  margin: 0 auto;

  h3 {
    background: #ececec;
    margin: 0;
    padding: 6px 15px;
    color: #333;
    border-bottom: 1px solid #dfdfdf;
    font-size: 20.04px;
    line-height: 30.06px;

    span {
      font-size: 14px;
      float: right;

      a {
        color: #e1251b;
      }
    }
  }

  /deep/.el-form-item {
    // width: 40%;
    margin: 30px auto 0;
    display: flex;
    align-items: center;
    padding-left: 32%;
    .el-form-item__label {
      min-width: 100px;
    }
    .el-form-item__content {
      line-height: normal;
      .el-input {
        width: 270px;
        height: 38px;
        box-sizing: border-box;
        outline: none;
      }
      .el-button {
        margin-left: 10px;
      }
      .btn {
        text-align: center;
        outline: none;
        width: 270px;
        height: 36px;
        background: #e1251b;
        color: #fff !important;
        margin: 0 0 0 36%;
      }
    }
    &.setting {
      padding-left: 41%;
    }
  }

  .controls {
    text-align: center;
    position: relative;
  }
}

.copyright {
  width: 1200px;
  margin: 0 auto;
  text-align: center;
  line-height: 24px;

  ul {
    li {
      display: inline-block;
      border-right: 1px solid #e4e4e4;
      padding: 0 20px;
      margin: 15px 0;
    }
  }
}
</style>